<template>
  <div class="setting-r-content">
    <div class="search-content">
      <Col class="panel search-panel"
        span="24">
      <Form :model="formHeader"
        :label-width="80"
        inline>
        <FormItem label="设备ID：">
          <Input v-model="formHeader.deviceNo"
            placeholder="请输入搜索关键字..."
            clearable></Input>
        </FormItem>
        <FormItem label="掉线类型：">
          <RadioGroup v-model="formHeader.type"
            type="button">
            <Radio label="">全部</Radio>
            <Radio label="0">断线</Radio>
            <Radio label="1">信号差</Radio>
            <Radio label="2">设备故障</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="事件时间：">
          <DatePicker type="date"
            v-model="formHeader.eventDate"
            placeholder="选择时间"></DatePicker>
        </FormItem>
        <FormItem class="margin-l">
          <Button type="primary"
            @click="_queryThing">查询</Button>
        </FormItem>
      </Form>
      </Col>
    </div>
    <div class="w1 setting-scroll__content">
      <Row class="setting-content__row">
        <!-- 表格 -->
        <Col class="panel table-panel"
          :span="24">
        <Table :columns="columns"
          :data="tableDatas"
          border
          style="width: 100%;"
          :loading="pageInfo.loading"></Table>
        </Col>
        <!-- 分页 -->
        <Col class="panel page-panel cf"
          :span="24"
          style="margin-bottom: 10px;">
        <Page :total="pageInfo.total"
          :current.sync="pageInfo.current"
          class="fr"
          @on-change="switchThePaging"></Page>
        </Col>
        <Col :span="24"
          class="page-bottom">
        </Col>
      </Row>
    </div>
  </div>
</template>

<script>
import { getServiceLogList } from '@/api'

export default {
  mounted() {
    this._getServiceLogList()
  },
  data() {
    return {
      formHeader: {
        deviceNo: '',
        type: '',
        eventDate: ''
      },

      tableDatas: [],
      pageInfo: {
        current: 1,
        loading: false,
        total: 0,
        page: 1
      },
      columns: [
        {
          title: '设备名称',
          key: 'deviceName',
          align: 'center'
        },
        {
          title: '掉线类型',
          key: 'type',
          align: 'center',
          render: (h, params) => {
            let type = ''
            switch (params.row.type) {
              case 0:
                type = '断线'
                break
              case 1:
                type = '信号差'
                break
              case 2:
                type = '设备故障'
                break
            }

            return h(
              'Tag',
              {
                props: {
                  color: 'red'
                }
              },
              type
            )
          }
        },
        {
          title: '事件时间',
          key: 'eventDate',
          align: 'center',
          render: (h, params) => {
            let time = this.moment(params.row.eventDate).format('YYYY-MM-DD')
            return h('span', time)
          }
        },
        {
          title: '客服姓名',
          key: 'customerName',
          align: 'center'
        },
        {
          title: '备注',
          key: 'remark',
          align: 'center'
        },
        {
          title: '创建时间',
          key: 'createdAt',
          align: 'center',
          render: (h, params) => {
            let time = this.moment(params.row.createdAt).format(
              'YYYY-MM-DD HH:mm:ss'
            )
            return h('span', time)
          }
        }
      ]
    }
  },
  methods: {
    switchThePaging(index) {
      let vm = this
      vm.pageInfo.page = index
      vm._getServiceLogList()
    },

    _getServiceLogList() {
      const _t = this
      _t.pageInfo.loading = true
      const params = {
        page: _t.pageInfo.page,
        size: 15,
        deviceNo: _t.formHeader.deviceNo,
        type: _t.formHeader.type,
        eventDate: _t.formHeader.eventDate
          ? _t.moment(_t.formHeader.eventDate).valueOf()
          : ''
      }
      getServiceLogList(params).then(res => {
        if (res.code == 200) {
          _t.tableDatas = res.data.list
          _t.pageInfo.total = res.data.total
          setTimeout(() => {
            _t.pageInfo.loading = false
          }, 500)
        }
      })
    },

    _queryThing() {
      let vm = this
      vm.pageInfo.current = 1
      vm.pageInfo.page = 1
      this._getServiceLogList()
    }
  }
}
</script>
